<template>
  <Tabs :animated="false" :value="active" @on-click="changeRoute" name="month-tab">
    <TabPane label="月考勤汇总" name="overview" tab="month-tab">
      <router-view></router-view>
    </TabPane>
    <TabPane label="月考勤明细" name="details" tab="month-tab">
      <router-view></router-view>
    </TabPane>
    <TabPane label="打卡记录" name="check-in" tab="month-tab">
      <router-view></router-view>
    </TabPane>
    <TabPane label="补卡记录" name="replenish" tab="month-tab">
      <router-view></router-view>
    </TabPane>
  </Tabs>
</template>
<script>
export default {
  data() {
    return {
      
    };
  },
  methods: {
    changeRoute(e) {
      // this.active = e;
      if (e == "overview") {
        this.$router.push("/attendance/work/monthly/overview/list");
      } else if (e == "details") {
        this.$router.push("/attendance/work/monthly/details/list");
      } else if (e == "check-in") {
        this.$router.push("/attendance/work/monthly/check-in/list");
      } else {
        this.$router.push("/attendance/work/monthly/replenish/list");
      }
    }
  },
  computed: {
    active(){
      let p = this.$route.path;
      if (p.includes("overview"))  {
        return "overview"
      } else if (p.includes("details")) {
        return "details"
      } else if (p.includes("check-in")) {
        return "check-in"
      } else {
        return "replenish"
      }
    }
  },
};
</script>
<style lang="scss" scoped>
</style>